<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .bigbox {
            width: 500px;
            height: 200px;
            padding: 50px;
            /* border: 1px solid #000; */
            margin: 100px auto;
        }

        .box {
            width: 500px;
            height: 200px;
        }

        .shang {
            width: 500px;
            height: 30px;
        }

        h2 {
            font-size: 20px;
            float: left;
        }

        #change {
            font-size: 18px;
            float: right;
        }

        main {
            width: 500px;
            height: 200px;
            margin-top: 50px;
            display: none;

        }

        .left {
            float: left;
        }

        p {
            margin-top: 15px;
        }

        .box section:first-child {
            display: block;
        }

        .first {
            color: #fe2d46;
        }

        .second {
            color: #f60;
        }

        .third {
            color: #faa90e;
        }

        span {
            margin-right: 6px;
        }

        .xia {
            display: block;
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <div class="box">
            <div class="shang">
                <h2>百度热搜</h2>
                <span id="change">换一换</span>
            </div>

            <main class="xia">
                <div class="left">
                    <p><span class="first">1</span> 加快构建网络空间命运共同体 </p>
                    <p> <span class="second">2</span> 女子凌晨外卖被偷跪地大哭 官方回应</p>
                    <p><span class="third ">3</span> 官方：到2025年居民拥有电子健康码</p>
                    <p><span>4</span>从历届航展看26年中国空天变化</p>
                    <p> <span>5</span> 如何结束新冠？112国专家达成共识 </p>
                    <p><span>6</span> 吸入新冠疫苗在京津等地可接种</p>
                </div>

            </main>

            <main class="xia1">
                <div class="left">
                    <p><span>7</span> 河南乡镇协助富士康招工 一村出一人</p>
                    <p> <span>8</span> 南京一动物园直播筹款：揭不开锅了</p>
                    <p><span>9</span> 亚马逊市值缩水超1万亿美元</p>
                    <p><span>10</span> 农民工自学考下12本证</p>
                    <p> <span>11</span> 美国16人感染李斯特菌</p>
                    <p><span>12</span> 六旬男子伤害1名女性后坠桥身亡</p>

                </div>
            </main>

            <main class="xia2">
                <div class="left">
                    <p><span>13 </span> 女童玩滑梯摔倒送医不治 警方通报</p>
                    <p> <span>14</span> 中纪委5天打3“虎” </p>
                    <p><span>15</span> 多位市委书记、市长密集赴上海</p>
                    <p><span>16</span> 疫情应对组织协调部门更名</p>
                    <p> <span>17</span> 缅因猫坠楼追责保姆？雇主回应 </p>
                    <p><span>18</span> DRX战胜T1</p>
                </div>
            </main>
        </div>
    </div>
</body>

</html>
<script>
    var change = document.getElementById("change");
    var xia = document.getElementsByClassName("xia")[0];
    var xia1 = document.getElementsByClassName("xia1")[0];
    var xia2 = document.getElementsByClassName("xia2")[0];
    var n = 1;
    change.onclick = function () {

        if (n == 1) {
            xia.style.display = "none";
            xia1.style.display = "block";
            xia2.style.display = "none";
            n++;

        } else if (n == 2) {
            xia.style.display = "none";
            xia1.style.display = "none";
            xia2.style.display = "block";
            n++;

        } else {
            xia.style.display = "block";
            xia1.style.display = "none";
            xia2.style.display = "none";
            n = 1;
        }
    }


</script>